<template>
	<u-popup v-model="valueCom" @close="close" closeable safe-area-inset-bottom mode="bottom" border-radius="20">
		<view class="sku-box">
			<view class="sku-goods-info df aic">
				<u-image  border-radius="10" width="150rpx" v-if="info.images" :src="info.images&&info.images.split(',')[0]" height="150rpx"></u-image>
				<view class="ml16 df jcc  " style="flex-direction: column;height: 150rpx;">
					<view class="title u-line-2">
						{{info.customGoodsName}}
					</view>
					<view class="price-box c9">
						{{info.introduce||''}}
						<!-- <text class="price fwb">￥100</text><text class="unit c3 fs24">/只</text><text class="old-price">￥10.0</text> -->
					</view>
				</view>
			</view>
			<u-line></u-line>
			<scroll-view scroll-y="true" class="p30" style="height: 480rpx;">
					<view class="sku-item mb20 df aic jcsb" v-for="item in info.platformGoodsSpecMix" :key="item.platformGoodsSpecMixId">
						<view class="df aic">
							<u-image style="margin-right: 20rpx;"  border-radius="10" width="96rpx" :src="item.image&&item.image.split(',')[0]" height="96rpx"></u-image>
							<view class="">
								
								<view class="fs26" style="width: 360rpx;">规格：{{item.specName}}</view>
								<view class="df aic price mt8" v-if="item.referencePrice && item.referencePrice!='0.00'&&TOKEN ">
									<text class="fs24">单价：</text><text class="fs26 "
										>{{item.referencePrice}}元/{{item.referenceUnit}}</text>
								</view>
								<view class="mt8 fs24">售价：<Vip class="mr5" v-if="item.isMemberPrice==1"></Vip>	<text class="price fs30 mr5">¥{{item.platformPrice||0}} </text><text v-if="item.isMemberPrice==1" class="text-under c9 fs24">原价:¥{{item.memberLevel0Price||0}} </text></view>
							</view>
						</view>
						<zm-number-box :saleUnit="item.saleUnit" :startSaleNum="item.startSaleNum" :step="item.startSaleNum&&item.isDouble==1?item.startSaleNum:1" :disabledInput="item.isDouble==1"  size="40" @change="valChange($event,item)" :min="0"
							v-model="item.purNum"></zm-number-box>
					</view>
			</scroll-view>
			<u-button 
				@click="close"
				:custom-style="{fontSize: '30rpx',marginBottom:'20rpx', color: '#ffffff',width: '690rpx', height: '88rpx',background: '#47A848',borderRadius:'44rpx',fontFamily: 'PingFang SC-Medium, PingFang SC'}"
				 ripple>完成</u-button>


		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			info:{
				type:Object,
				default:() =>{},
			},
			goodsCarList:{
				type:Array,
				default:() =>[],
			},
		},
		data() {
			return {
				buyNum:1,
				valueCom: false,
			}
		},
		methods:{
			valChange(e,item) {
				this.$set(item,'purNum',e)
				this.handleCart(item)
			},
			handleCart(e) {
				let goodsCarList =  this.goodsCarList||[]
				let index = goodsCarList.findIndex(i => i.platformGoodsSpecMixId == e.platformGoodsSpecMixId)
				if (index == -1) { //购物车中没有这个商品  新增操作
					goodsCarList.unshift(e)
				} else { //购物车中有这个商品  修改操作
					if (e.purNum == 0) { //删除操作
						goodsCarList.splice(index, 1)
					} else {
						//只有購物車的時候 才手動更新列表
						goodsCarList[index].purNum = e.purNum
						goodsCarList[index].busType = ''
						goodsCarList[index].platformPrice = e.platformPrice
					}
				}
				this.$emit('change',this.info)
				this.$emit('changeCarList',goodsCarList)
			},
			close(){
				this.$emit('input',false)
			}
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(e) {
					this.valueCom = e
				},

			}
		}
	}
</script>

<style lang="scss" scoped>
	.sku-box {
		.bug-num{
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.bug-btn-handle{
			
		}
		.sku-item{
			background: #F1F1F1;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 25rpx 20rpx;
			width: 706rpx;
		}
		
		.sku-goods-info{
			padding: 30rpx;
			.title{
				width: 475rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.price-box{
				font-size: 24rpx;
				>.price{
					color: #EF2929;
					font-family: PingFang SC-Bold,PingFang SC;
				}
				>.unit{
					
				}
					
				>.old-price{
					color: #999999;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					text-decoration: line-through;
				}
			}
		}
		.tip{
			height: 68rpx;
			background: #FFFDF4;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #47A848;
			padding: 18rpx 30rpx;
		}
	}
</style>